<template>
  <div style="margin-top: 20px;">
    <div style="margin-left: 300px">
      <div>
        <!--维修处理状态1-已申请(审核中)2-已审核（处理中）3-已处理-->
        <el-steps :space="500" :active="detail.status" :finish-status="successStatus">
          <el-step :title="detail.status >= 1 ? '已申请' : '未申请'" :status="handlerStatus(1, detail)" />
          <el-step :title="handlerTitle2(detail)" :status="handlerStatus(2, detail)" />
          <el-step :title="detail.status >= 3 ? '已处理' : '处理中'" :status="handlerStatus(3, detail)" :description="handlerDesc3(detail)" />
        </el-steps>
      </div>
      <div style="width: 600px;margin-top: 100px;margin-left: 110px">
        <el-form ref="detail" :model="detail" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item v-if="showFormContent === 1" label="维修地点" prop="title">
            <el-select v-model="detail.buildInfo" placeholder="请选择">
              <el-option
                v-for="item in userBuilds"
                :key="item.id"
                :label="item.xiaoquName + item.buildNo + '-' + item.unitNo + '-' + item.houseNo"
                :value="item.xiaoquName + item.buildNo + '-' + item.unitNo + '-' + item.houseNo"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="showFormContent === 1" label="标题" prop="title">
            <el-input v-model="detail.title" />
          </el-form-item>
          <el-form-item v-if="showFormContent === 1" label="图片" prop="picture">
            <el-upload
              class="avatar-uploader"
              action="http://39.106.32.84:8080/PMSystem/upload"
              :show-file-list="false"
            >
              <img v-if="detail.picture" class="avatar" :src="detail.picture">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item v-show="showFormContent === 1" label="详细说明">
            <el-input v-model="detail.content" type="textarea" />
          </el-form-item>
          <el-form-item v-show="showFormContent === 0" label="处理结果:">
            {{ detail.result }}
          </el-form-item>
          <el-form-item v-show="showFormContent === 0" label="维修地点:">
            {{ detail.buildInfo }}
          </el-form-item>
          <el-form-item v-show="showFormContent === 0" label="标题:">
            {{ detail.title }}
          </el-form-item>
          <el-form-item v-show="showFormContent === 0" label="图片:">
            <img style="width: 100px;height: 100px" :src="detail.picture">
          </el-form-item>
          <el-form-item v-show="showFormContent === 0" label="详细说明:">
            {{ detail.content }}
          </el-form-item>
          <el-form-item style="margin-left: 180px">
            <el-button v-show="detail.status <= 1" type="primary" @click="submitForm('detail')">{{ buttonContent === 1 ? '修改内容' : '保存' }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetailById, getCurrentUserBuilds, updateRepair } from '@/api/repair'

export default {
  data() {
    return {
      userBuilds: {}, // 用户拥有的住房列表
      detail: {
        status: '',
        success: '',
        content: '',
        title: '',
        buildInfo: '',
        handlerName: ''
      }, // 维修单详情
      currentRepairId: '', // 当前维修单id
      successStatus: 'success', // 成功状态success-成功error-失败
      showFormContent: 0, // 表单内显示内容，0-文本，1-输入框
      buttonContent: 1, // 按钮状态1-修改内容2-保存
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        picture: [
          { required: true, message: '请上传图片', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.currentRepairId = this.$route.query.repairId // 获取路由上的id
    this.getDetail(this.currentRepairId)
    this.getBuilds()
  },
  methods: {
    submitForm(formName) { // 提交表单方法
      if (this.buttonContent === 2) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateRepair()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
      this.updateButton()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    back() { // 点击返回按钮方法
      this.$router.back()
    },
    updateButton() { // 点击按钮的文本变化
      if (this.buttonContent === 1) {
        this.buttonContent = 2
        this.showFormContent = 1
      } else {
        this.showFormContent = 0
        this.buttonContent = 1
      }
    },
    getDetail(id) { // 根据id获取维修单的详情
      getDetailById({ id: id }).then(res => {
        this.detail = res.data
      })
    },
    getBuilds() { // 获取用户所拥有的所有住房
      getCurrentUserBuilds().then(res => {
        this.userBuilds = res.data
      })
    },
    updateRepair() { // 修改维修单
      updateRepair(this.currentRepairId, this.detail).then(res => {
        if (res.code === 20000) {
          this.$message.success('修改成功')
        }
      })
    },
    handlerTitle2(detail) { // 处理状态文字显示函数
      console.log(detail)
      if (detail.status >= 2) {
        if (detail.success === false) {
          return '被驳回'
        }
        return '已审核'
      } else {
        return '审核中'
      }
    },
    handlerStatus(index, detail) { // 处理状态颜色显示
      if (detail.success === false && detail.status === index) {
        return 'error'
      }
    },
    handlerDesc3(detail) { // 处理第三个步骤栏描述信息
      if (detail.status >= 2 && detail.handlerName) {
        return '处理人：' + detail.handlerName
      }
    }
  }
}
</script>

<style lang="scss">

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
